<template>
  <div class="banner">
    <div>
      <a-button
        @click="handleAdd"
        type="primary"
        style="margin-bottom: 10px;"
      >新增
      </a-button>
    </div>
    <Btable
      :columns="columns"
      :dataSource="dataSource"
    >
      <span slot="operate" slot-scope="props">
        <a-button type="primary" size="small" style="font-size:12px;" @click="handleEdit(props.text)">编辑</a-button>
      </span>

    </Btable>
    <Modal :modalOptions="modalOptions" @handleOk="handleSubmit" @handleCancel="handleCancel">
      <div slot="modalCon">
        <a-form
          :form="form"
        >
          <a-form-item
            label="标题"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="['title', {
                rules: []
              }]"/>
          </a-form-item>
          <a-form-item
            label="状态"
            v-bind="formItemLayout"
          >
            <a-select
              v-decorator="['status', {
                rules: []
              }]"
            >
              <a-select-option :value="1">
                正常
              </a-select-option>
              <a-select-option :value="0">
                注销
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="链接"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="['url', {
                rules: []
              }]" />
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            label="图片"
          >
            <UploadImage :fileUrl="fileUrlImage" imgSize="15000" @uploadSuccess="uploadSuccess"></UploadImage>
          </a-form-item>
        </a-form>
      </div>
    </Modal>
  </div>
</template>
<script>
import columns from './column'
import Btable from '@/components/Btable'
import Modal from '@/components/Modal'
import UploadImage from '@/components/UploadImage'
import { handleBannerList, handleBannerUpdate, handleBannerDetail } from '@/server/api'
export default {
  name: 'Banner',
  data () {
    return {
      columns,
      fileUrlImage: '',
      formItemLayout: {
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 4 },
          sm: { span: 16 }
        }
      },
      modalOptions: {
        title: '标题',
        modalVisibile: false,
        cancelText: '取消',
        okText: 'dasasas'
      },
      curId: '',
      dataSource: []
    }
  },
  created () {
    this.form = this.$form.createForm(this)
    this.handleBannerList()
  },
  components: {
    Btable,
    Modal,
    UploadImage
  },
  methods: {
    async handleBannerList () {
      const params = {
      }
      const res = await handleBannerList(params)
      if (res.code === 0) {
        this.dataSource = res.data.data
        console.log(res, '==res==')
      }
    },
    async handleBannerDetail (id) {
      const params = {
        id
      }
      const res = await handleBannerDetail(params)
      if (res.code === 0) {
        this.form.setFieldsValue({
          ...res.data
        })
        this.fileUrlImage = res.data.image
      }
    },
    handleAdd () {
      const id = ''
      this.curId = ''
      this.modalOptions.modalVisibile = true
      this.form.resetFields()
      this.fileUrlImage = ''
      // this.handleBannerDetail(id)
    },
    handleSubmit () {
      this.form.validateFields((error, fieldsValue) => {
        const params = {
          ...fieldsValue,
          id: this.curId,
          image: this.fileUrlImage
        }
        console.log(params, '==params')
        handleBannerUpdate(params).then(res => {
          if (res.code === 0) {
            this.$message.success('更新成功')
          }
        })
          .then(() => {
            this.modalOptions.modalVisibile = false
            this.handleBannerList()
          })
      })
    },
    handleEdit (text) {
      const { id } = text
      this.curId = id
      console.log(text, '==text==')
      this.modalOptions.modalVisibile = true
      this.handleBannerDetail(id)
    },
    handleCancel () {
      console.log('test')
      this.this.modalOptions.modalVisibile = false
    },
    uploadSuccess (url) {
      this.fileUrlImage = url
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
